<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <label>用户名：</label>
  <input type="text" class="username">
  <br>
  <label>密码：</label>
  <input type="password" class="password">
  <br>
  <button>登录</button>
  <script>
    // 所有js的内容，都是存在浏览器的内存中的
    // 内存中的东西，刷新页面以后全部会重置

    // 保存数据只有两种办法
    // 1. 存到数据库
    // 2. 本地存储


    // localStorage和sessionStorage都能存储数据，刷新都不会丢失
    // localStorage会一直存在，sessionStorage当页面关闭就会消失
    // localStorage是存在浏览器的，所以各个页面可以共享数据
    // sessionStorage是存在当前窗口的，窗口之间不共享

    // localStorage是不能跨浏览器的
    // localStorage只能在相同的域名下的数据可以共享

    // localStorage和sessionStorage都只能存字符串
    // 所以要存对象或者数组的时候，就需要用JSON.parse和JSON.stringify
    



    // localStorage(本地存储空间)
    // localStorage.setItem("name", "zhangsan"); // 存数据
    // localStorage.getItem("name"); // 取数据
    // localStorage.removeItem("name"); // 删除数据
    // localStorage.clear(); // 删除所有的localStorage
    // localStorage存的内容永远都不会被自动删除，除非手动删除

    // document.querySelector("button").onclick = () => {
    //   localStorage.setItem("name", "zhangsan")
    // }
    // console.log(localStorage.getItem("name"));
    // localStorage.removeItem("name");
    // localStorage.clear();

    // 进入页面的时候，先尝试拿一下存过的用户名和密码
    // console.log(localStorage.getItem("username"));
    // console.log(localStorage.getItem("password"));
    // document.querySelector(".username").value = localStorage.getItem("username") || "";
    // document.querySelector(".password").value = localStorage.getItem("password") || "";

    // 记住密码功能
    // document.querySelector("button").onclick = () => {
    //   // console.log(document.querySelector(".username").value);
    //   // console.log(document.querySelector(".password").value);

    //   // 跳转之前先把数据存起来
    //   const username = document.querySelector(".username").value;
    //   const password = document.querySelector(".password").value;
    //   localStorage.setItem("username", username);
    //   localStorage.setItem("password", password);
    //   // 跳转
    //   location.href = "https://www.baidu.com";
    // }





    // sessionStorage(会话存储空间)
    // sessionStorage.setItem("name", "zhangsan"); // 存数据
    // sessionStorage.getItem("name"); // 取数据
    // sessionStorage.removeItem("name"); // 删除数据
    // sessionStorage.clear(); // 删除所有的sessionStorage

    // document.querySelector("button").onclick = () => {
    //   sessionStorage.setItem("name", "zhangsan")
    // }

    // 表单回显
    // 一个页面表单填了一般，刷新了一下页面
    // 想让之前填的内容还在，可以使用sessionStorage
  </script>
</body>
</html>